<template>
    <div class="app-container">
      <el-form :inline="true">
        <el-form-item label="部门名称">
          <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable size="small"
                    @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
            <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
                       :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" size="mini"
                     @click="handleQuery"
          >搜索
          </el-button>
        </el-form-item>
      </el-form>
  
      <el-table v-loading="loading" :data="deptList" row-key="deptId"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="deptName" label="部门名称"></el-table-column>
        <el-table-column label="部门图片" align="center" prop="logo">
          <template slot-scope="scope">
            <el-image :src="base_url + scope.row.logo" style="height: 40px;width: 40px"/>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
        <el-table-column prop="status" label="状态" :formatter="statusFormat" width="100"></el-table-column>
        <el-table-column prop="dataType" label="数据类型" width="100">
          <template slot-scope="scope">
            <div v-for="(item, index) in dict.type.dept_data_type" :key="index">
              <el-tag v-if="scope.row.dataType === item.value" style="margin-right: 10px">{{
                  item.label
                }}
              </el-tag>
            </div>
  
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="200">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit"
                       @click="handleUpdate(scope.row)"
                       v-hasPermi="['system:dept:edit']"
            >修改
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
                       v-hasPermi="['system:dept:add']"
            >新增
            </el-button>
            <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete"
                       @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 添加或修改部门对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="24" v-if="form.parentId != 0">
              <el-form-item label="上级部门" prop="parentId">
                <treeselect v-model="form.parentId" :options="deptOptions" placeholder="选择上级部门"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="!isRoot ? '企业名称' : '部门名称'" prop="deptName">
                <el-input v-model="form.deptName" :placeholder="!isRoot ? '请输入企业名称' : '请输入部门名称'"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-show="isRoot">
              <el-form-item label="显示排序" prop="orderNum">
                <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人" prop="leader">
                <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入联系电话"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门状态">
                <el-radio-group v-model="form.status">
                  <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{
                      dict.dictLabel
                    }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <!--        <el-row>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="经度" prop="lng">-->
          <!--              <el-input v-model="form.lng" placeholder="请输入经度" maxlength="50" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="纬度" prop="lat">-->
          <!--              <el-input v-model="form.lat" placeholder="请输入纬度" maxlength="50" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="经纬度">-->
          <!--              <el-link href="https://lbs.qq.com/tool/getpoint/getpoint.html" style="color: #00b7ee"-->
          <!--                target="_blank">获取链接</el-link>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="企业微信" prop="qyClientId">-->
          <!--              <el-select v-model="form.qyClientId" placeholder="请选择企业微信客户端">-->
          <!--                <el-option v-for="item in qyList" :key="item.id" :label="item.qyName" :value="item.id"></el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--        </el-row>-->
          <el-form-item label="部门图片" prop="logo">
            <el-upload class="avatar-uploader" :action="url" :show-file-list="false" :on-success="uploadSuccess"
                       :limit="1"
                       :file-list="fileList" :headers="headers" :before-upload="checkUpload" :disabled="flag"
            >
              <img v-if="files.path" :src="base_url + files.path" class="avatar" width="100px" height="100px">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <!--        <el-form-item label="地址" prop="address">-->
          <!--          <el-input v-model="form.address" type="textarea" placeholder="请输入地址" :autosize="{ minRows: 4, maxRows: 4 }"-->
          <!--            :style="{ width: '100%' }"></el-input>-->
          <!--        </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
      <!-- 微信客户端配置 -->
      <el-dialog title="配置微信客户端" :visible.sync="wxOpen" width="500px" append-to-body>
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in listClient" :key="item.id" :label="item.id" :value="item.id">{{
              item.name
            }}
          </el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitWxForm">确 定</el-button>
          <el-button @click="wxCancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
    addDept,
    delDept,
    getClientList,
    getDept,
    listDept,
    saveClient,
    treeselect as deptTreeselect,
    updateDept
  } from '@/api/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import store from '@/store'
  import { getToken } from '@/utils/auth'
  
  export default {
    name: 'Dept',
    dicts: ['dept_data_type', 'sys_normal_disable'],
    components: { Treeselect },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 表格树数据
        deptList: [],
        // 部门树选项
        deptOptions: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 状态数据字典
        statusOptions: [],
        // 菜单列表
        menuOptions: [],
        // 查询参数
        queryParams: {
          deptName: undefined,
          status: undefined
        },
        // 表单参数
        form: {},
        // 上级部门
        parentDept: {},
        // 表单校验
        rules: {
          // parentId: [
          //   { required: true, message: "上级部门不能为空", trigger: "blur" }
          // ],
          deptName: [
            { required: true, message: '部门名称不能为空', trigger: 'blur' }
          ],
          orderNum: [
            { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
          ],
          email: [
            {
              type: 'email',
              message: '\'请输入正确的邮箱地址',
              trigger: ['blur', 'change']
            }
          ],
          phone: [
            {
              // pattern: /^((1[3|4|5|6|7|8|9][0-9]\d{8})|((\d{4}-)?\d{6,8}))$/,
              message: '请输入正确的手机号码',
              trigger: 'blur'
            }
          ]
        },
        base_url: process.env.VUE_APP_BASE_API,
        //文件列
        fileList: [],
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        //上传地址
        url: process.env.VUE_APP_BASE_API + '/common/upload',
        //是否禁用上传
        flag: false,
        //图片路径
        files: { path: '' },
        isAdmin: false  //超级管理员
        , defaultProps: {
          children: 'children',
          label: 'label'
        },
  
        checkList: [],
        wxOpen: false,
        listClient: [],
        deptId: undefined,
        // 企业微信列表
        qyList: [],
        isRoot: true //是否是顶级部门
      }
    },
    created() {
      //获取用户角色
      const roles = store.getters && store.getters.roles
      var isAdmin = false
      for (var i = 0; i < roles.length; i++) {
        if (roles[i] == 'admin') {
          isAdmin = true
          break
        }
      }
      //不是超级管理员，限制
      if (!isAdmin) {
        var r = this.rules
        r['parentId'] = [
          { required: true, message: '上级部门不能为空', trigger: 'blur' }
        ]
        this.rules = r
      }
  
      this.isAdmin = isAdmin
  
      this.getList()
      this.getDicts('sys_normal_disable').then(response => {
        this.statusOptions = response.data
      })
    },
    methods: {
      /** 查询部门列表 */
      getList() {
        this.loading = true
        listDept(this.queryParams).then(response => {
          console.log('部门列表', response)
          if (response.data.length > 0) {
            this.deptList = this.handleTree(response.data, 'deptId', null, null, response.data[0].parentId)
            // this.deptList = response.data
          }
          this.loading = false
        })
      },
      // 字典状态字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.dict.type.sys_normal_disable, row.status);
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
  
      },
      // 表单重置
      reset() {
        if (this.$refs.menu != undefined) {
          this.$refs.menu.setCheckedKeys([])
        }
  
        this.form = {
          deptId: undefined,
          parentId: undefined,
          deptName: undefined,
          orderNum: undefined,
          leader: undefined,
          phone: undefined,
          email: undefined,
          address: undefined,
          logo: undefined,
          lng: undefined,
          lat: undefined,
          status: '0'
        }
        this.resetForm('form')
        this.fileList = []
        this.flag = false
        this.files = { path: '' }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList()
      },
      /** 新增按钮操作 */
      handleAdd(row) {
        this.reset()
        if (row != undefined) {
          this.form.parentId = row.deptId
        }
        console.log(row)
        this.parentDept = row
        this.open = true
        this.title = '添加部门'
        // listDept().then(response => {
        //   this.deptOptions = this.handleTree(response.data, "deptId", "parentId", "children", 100);
        //   console.log(this.deptOptions)
        // });
        deptTreeselect().then(response => {
          this.deptOptions = response.data
        })
      },
      /** 
       * 修改按钮操作
       * @param {Object} row - 当前行数据
       * @description 
       * 1. 重置表单
       * 2. 获取部门详情
       * 3. 构建部门树，将当前部门的父级设置为根节点
       */
      handleUpdate(row) {
        this.reset()
        let that = this
        //当前角色的信息
        console.log('当前角色的信息',row,this.$store.state.user.userinfo)
        getDept(row.deptId).then(response => {
          this.form = response.data
          this.files = { path: this.form.logo }
          this.open = true
          console.log('修改部门', this.form)
          this.title = '修改部门'
          
          // 获取部门树数据并重构
          deptTreeselect().then(treeResponse => {
            console.log('treeResponseata', treeResponse.data)
  
            let dataTree = treeResponse.data
            //如果当前修改的部门是最顶级部门，展示为修改企业，并且隐藏排序
            console.log('dataTree',dataTree[0].id,row.deptId)
            if(dataTree[0].id == row.deptId){
              this.isRoot = false
            }else{
              this.isRoot = true
            }
            // 递归检查节点是否存在于树中
            const findNodeInTree = (nodes, targetId) => {
              if (!nodes) return false
              return nodes.some(node => {
                if (node.id === targetId) {
                  return true
                }
                if (node.children && node.children.length) {
                  return findNodeInTree(node.children, targetId)
                }
                return false
              })
            }
  
            const isRootDuplicate = findNodeInTree(treeResponse.data, that.form.parentId)
            
            if (isRootDuplicate) {
              // 如果根节点已存在于树中，直接使用原数据
              that.deptOptions = treeResponse.data
            } else {
              // 构建根节点（当前部门的父级）
              const rootNode = {
                id: that.form.parentId,
                label: that.form.parentName,
                children: treeResponse.data || [],
                deptId: that.form.deptId
              }
              
              // 过滤掉当前部门及其子部门，避免循环选择
              const filterCurrentDept = (nodes) => {
                return nodes.filter(node => {
                  if (node.id === row.id) {
                    return false
                  }
                  if (node.children && node.children.length) {
                    node.children = filterCurrentDept(node.children)
                  }
                  return true
                })
              }
              
              rootNode.children = filterCurrentDept(rootNode.children)
              that.deptOptions = [rootNode]
            }
            
            console.log('部门树', that.deptOptions)
          }).catch(error => {
            console.error('获取部门树失败:', error)
            this.$message.error('获取部门树失败')
          })
        }).catch(error => {
          console.error('获取部门详情失败:', error)
          this.$message.error('获取部门详情失败')
        })
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.deptId != undefined) {
              updateDept(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                }
              })
            } else {
              addDept(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('新增成功')
                  this.open = false
                  this.getList()
                }
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delDept(row.deptId)
        }).then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        }).catch(function() {
        })
      },
      showParent() {  //这里做了一个4级菜单不能更改上级的限制，我不清楚业务逻辑，不做更改，保留该功能
        if (this.parentDept.ancestors) {
          console.log('父级部门', this.parentDept.ancestors.split(',').length > 3)
          return this.parentDept.ancestors.split(',').length > 3
        } else {
          return false
        }
      },
      submitWxForm() {
        console.log(this.checkList)
        if (this.checkList.length > 1) {
          this.msgError('部门客户端最多设置一个')
          return
        }
        if (this.deptId) {
          saveClient({
            deptId: this.deptId,
            clientIds: this.checkList
          }).then(res => {
            if (res.code == 200) {
              this.msgSuccess('配置成功')
              this.wxCancel()
            }
          })
        }
      },
      handleUpdateWxOpen(row) {
        this.checkList = []
        this.deptId = row.deptId
        getClientList(row.deptId).then(res => {
          console.log(res)
          var ids = []
          res.data.filter(e => {
            ids.push(e.wxClientId)
          })
          this.checkList = ids
        })
        this.wxOpen = true
      },
      wxCancel() {
        this.wxOpen = false
      },
      /**关闭dialog的按钮触发*/
      closeDialog() {
        if (this.files.path != undefined && this.files.path != '') {
          console.log('关闭dialog触发删除')
          delFile(this.files).then(response => {
            this.files.path = undefined
            console.log(response)
          })
        }
      },
      /** 上传之前的校验 */
      checkUpload(file) {
        console.log('文件类型', file)
        const imgType = file.type
        //图片不大于2M
        const isLtSize = file.size / 1024 / 1024 < 2
        if (['image/png', 'image/jpeg', 'image/jpg', 'image/gif'].indexOf(imgType) === -1) {
          this.$message.error('上传图片只能是 JPG、PNG、GIF格式!')
          return false
        }
        if (!isLtSize) {
          this.$message.error(`上传图片大小不能超过2MB!`)
          return false
        }
      },
      /** 上传成功后的回调 */
      uploadSuccess(response, file, fileList) {
        console.log('1111')
        this.form.logo = response.fileName
        this.files.path = response.fileName
        this.flag = true
      }
    }
  }
  </script>
  <style scoped>
  .avatar-uploader i {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader i:hover {
    border-color: #409EFF;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  
  .form {
    height: 600px;
  }
  </style>
  